Skip to content

feat(angular): integrate angular devtools#6248

Draft
riccardoperra wants to merge 2 commits intoalphafrom
feat/angular-devtools
Draft

feat(angular): integrate angular devtools#6248
riccardoperra wants to merge 2 commits intoalphafrom
feat/angular-devtools

Conversation

@riccardoperra
Copy link
Copy Markdown
Collaborator

TanStack Devtools Angular package is not published yet in npm

  • add new @tanstack/angular-table-devtools package
  • add devtools integration in composable tables

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 9, 2026

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e5013c02-250b-4282-a8c7-432729e32316

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/angular-devtools

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@riccardoperra riccardoperra changed the title feat: add angular devtools feat: integrate angular devtools May 9, 2026
@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented May 9, 2026

View your CI Pipeline Execution ↗ for commit 5f23f32

Command Status Duration Result
nx affected --targets=test:eslint,test:sherif,t... ✅ Succeeded 37s View ↗
nx run-many --targets=build --exclude=examples/** ✅ Succeeded 3s View ↗

☁️ Nx Cloud last updated this comment at 2026-05-09 08:07:52 UTC

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 9, 2026

More templates

@tanstack/angular-table

npm i https://pkg.pr.new/TanStack/table/@tanstack/angular-table@6248

@tanstack/angular-table-devtools

npm i https://pkg.pr.new/TanStack/table/@tanstack/angular-table-devtools@6248

@tanstack/lit-table

npm i https://pkg.pr.new/TanStack/table/@tanstack/lit-table@6248

@tanstack/match-sorter-utils

npm i https://pkg.pr.new/TanStack/table/@tanstack/match-sorter-utils@6248

@tanstack/preact-table

npm i https://pkg.pr.new/TanStack/table/@tanstack/preact-table@6248

@tanstack/preact-table-devtools

npm i https://pkg.pr.new/TanStack/table/@tanstack/preact-table-devtools@6248

@tanstack/react-table

npm i https://pkg.pr.new/TanStack/table/@tanstack/react-table@6248

@tanstack/react-table-devtools

npm i https://pkg.pr.new/TanStack/table/@tanstack/react-table-devtools@6248

@tanstack/solid-table

npm i https://pkg.pr.new/TanStack/table/@tanstack/solid-table@6248

@tanstack/solid-table-devtools

npm i https://pkg.pr.new/TanStack/table/@tanstack/solid-table-devtools@6248

@tanstack/svelte-table

npm i https://pkg.pr.new/TanStack/table/@tanstack/svelte-table@6248

@tanstack/table-core

npm i https://pkg.pr.new/TanStack/table/@tanstack/table-core@6248

@tanstack/table-devtools

npm i https://pkg.pr.new/TanStack/table/@tanstack/table-devtools@6248

@tanstack/vue-table

npm i https://pkg.pr.new/TanStack/table/@tanstack/vue-table@6248

@tanstack/vue-table-devtools

npm i https://pkg.pr.new/TanStack/table/@tanstack/vue-table-devtools@6248

commit: d397a99

Copy link
Copy Markdown

@nx-cloud nx-cloud Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Important

At least one additional CI pipeline execution has run since the conclusion below was written and it may no longer be applicable.

Nx Cloud is proposing a fix for your failed CI:

We resolved two CI failures introduced by the angular devtools integration. The sherif failure was fixed by reordering dependencies alphabetically in the composable-tables example, and the knip failures were fixed by removing the unused @tanstack/angular-devtools dependency from the package, adding the missing tslib dependency required by importHelpers, and removing the export keyword from the internal-only generateId function.

Tip

We verified this fix by re-running table:test:sherif, table:test:knip.

Suggested Fix changes
diff --git a/examples/angular/composable-tables/package.json b/examples/angular/composable-tables/package.json
index 2663831d..3d441290 100644
--- a/examples/angular/composable-tables/package.json
+++ b/examples/angular/composable-tables/package.json
@@ -19,8 +19,8 @@
     "@angular/router": "^21.2.11",
     "@faker-js/faker": "^10.4.0",
     "@tanstack/angular-devtools": "https://pkg.pr.new/TanStack/devtools/@tanstack/angular-devtools@368",
-    "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
     "@tanstack/angular-table": "^9.0.0-alpha.45",
+    "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1"
   },
diff --git a/packages/angular-table-devtools/package.json b/packages/angular-table-devtools/package.json
index 7bf1bf22..2df42e78 100644
--- a/packages/angular-table-devtools/package.json
+++ b/packages/angular-table-devtools/package.json
@@ -44,10 +44,10 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/angular-devtools": "https://pkg.pr.new/TanStack/devtools/@tanstack/angular-devtools@368",
     "@tanstack/devtools-utils": "https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-utils@368",
     "@tanstack/table-core": "workspace:*",
-    "@tanstack/table-devtools": "workspace:*"
+    "@tanstack/table-devtools": "workspace:*",
+    "tslib": "^2.8.1"
   },
   "peerDependencies": {
     "@angular/core": ">=21.0.0"
diff --git a/packages/angular-table-devtools/src/injectTanStackTableDevtools.ts b/packages/angular-table-devtools/src/injectTanStackTableDevtools.ts
index 40303e30..e769ae3b 100644
--- a/packages/angular-table-devtools/src/injectTanStackTableDevtools.ts
+++ b/packages/angular-table-devtools/src/injectTanStackTableDevtools.ts
@@ -24,7 +24,7 @@ function normalizeName(name?: string) {
 }
 
 let autoId = 0
-export function generateId(): string {
+function generateId(): string {
   const appId = inject(APP_ID)
   return `tanstacktable-${appId}_${autoId++}${Date.now().toString(36)}`
 }

Apply fix via Nx Cloud  Reject fix via Nx Cloud


Or Apply changes locally with:

npx nx-cloud apply-locally DsIG-vU7o

Apply fix locally with your editor ↗   View interactive diff ↗



🎓 Learn more about Self-Healing CI on nx.dev

@riccardoperra riccardoperra force-pushed the feat/angular-devtools branch from 5f23f32 to 9a3e490 Compare May 9, 2026 08:04
@riccardoperra riccardoperra force-pushed the feat/angular-devtools branch from 9a3e490 to d397a99 Compare May 9, 2026 08:05
@riccardoperra riccardoperra changed the title feat: integrate angular devtools feat(angular): integrate angular devtools May 9, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant